<template>
	<view class="_wrapper _over-hidden _flex">
		<view class="_wrapper-y _cart _p20 _box-scroll _over-scroll-hidden" style="width: 20%;">
			<template v-for="itemLen in 5">
				<view class="_flex _flex-wrap _flex-space _flex-start">
					<template v-for="itemEl in comEls.filter(item => item.y_len == itemLen)" :key="itemEl.id">
						<view class="el-item" :class="{ 'el-item-active': itemEl.active }" @click="comElActive(itemEl)">
							<image :src="$toolImg.img(itemEl.img)" :style="elStyle(itemEl)"></image>
						</view>
					</template>
				</view>
			</template>
		</view>
		<view class="_wrapper-y _cart _p20 _box-scroll _over-scroll-hidden">
			<view class="_cart _p5 _flex _flex-start _flex-a-start">
				x:<el-input v-model.number="mapLenX" style="width: 55px; height: 22px; line-height: 22px;" />
				y:<el-input v-model.number="mapLenY" style="width: 55px; height: 22px; line-height: 22px;" />
			</view>
			<view class="_cart _p5 _rel _m-t-10 map-box _font _box-scroll _over-scroll-hidden">
				<template v-for="x in mapLenX">
					<template v-for="y in mapLenY">
						<view class="map-item" @click="addMapItem(x-1, y-1)" :style="mapItemStryle(x-1, y-1)">{{x}}{{y}}</view>
					</template>
				</template>
				<template v-for="item in maps">
					<view class="map-item" :style="mapItemStryle(item.pos_x, item.pos_y)">
						<image :src="$toolImg.img(item.el.img)" :style="elStyle(item.el)"></image>
						<view class="map-item-badge" @click="removeMapItem(item.id)">x</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import toolAction from '@/tool/http/tool-action'

	const gameElementAction = toolAction.init("game_element");
	const gameMapTVAction = toolAction.init("game_map_template_view");
	
	export default {
		__option: {
			width: "100%"
		},
		props: ["param"],
		data() {
			return {
				comEls: [],
				maps: [],
				comLen: 30,
				mapLenX: 50,
				mapLenY: 30,
			}
		},
		async mounted() {
			await this.initComEls();
			await this.initMapContent();
		},
		methods: {
			async removeMapItem(id) {
				await gameMapTVAction.remove({ id });
				this.initMapContent();
			},
			async addMapItem(x, y) {
				let elActive = this.comEls.find(item => item.active == true);
				if (!elActive) {
					return this.$toolUni.toast("请先选择元素！");
				}
				// 规则验证 - 待补充
				await gameMapTVAction.sync({
					pos_y: y,
					pos_x: x,
					map_template_id: this.param.id,
					element_id: elActive.id
				});
				this.initMapContent();
			},
			async initMapContent() {
				this.maps = await gameMapTVAction.list({
					rules: {
						map_template_id__eq: this.param.id
					}
				})
				this.maps.forEach(item => {
					item.el = this.comEls.find(el => el.id == item.element_id);
				});
			},
			mapItemStryle(x, y) {
				return {
					left: x * this.comLen + "px",
					top: y * this.comLen + "px",
				}
			},
			comElActive(itemEl) {
				this.comEls.forEach(item => item.active = false);
				itemEl.active = true;
			},
			elStyle(el) {
				return {
					width: el.x_len * this.comLen + "px",
					height: el.y_len * this.comLen + "px",
				}
			},
			async initComEls() {
				this.comEls = await gameElementAction.list();
			}
		},
	}
</script>

<style>
	.el-item-active {
		border: 5px solid blue;
	}
	.map-box {
		background-color: black;
		height: 90%;
	}
	.map-item {
		width: 30px;
		height: 30px;
		position: absolute;
	}
	.map-item-badge {
		background-color: red;
		color: #fff;
		border-radius: 10px;
		text-align: center;
		width: 15px;
		height: 15px;
		font-size: 8px;
		line-height: 10px;
		position: absolute;
		top: -7px;
		left: -7px;
		z-index: 999;
	}
</style>